<template>
  <div
    class="box py-28 px-12 box-border bg-image bgEA5752 overflow-y-auto pb-50"
  >
    <div class="box-border textfff pt-36 m-relative">
      <!-- 复制核对 -->
      <div class="h-72 flex-center bgfffeff round-16 text-size-26 text000">
        请确认以下信息是您在群里的信息一致
      </div>
      <div
        class="mt-30 round-16 bgfffeff px-40 box-border pt-38 pb-58 text-size-26 text000"
      >
        <dl class="w-full flex flex-a-c">
          <dt class="w-98 h-98">
            <van-image
              width="100%"
              height="100%"
              round
              fit="cover"
              :src="userInfo?.wxHeadImg"
            />
          </dt>
          <dd class="ml-24 flex-col flex-j-c flex-1 h-98 overflower-hidden">
            <p class="w-max-300 line-h-40 text-overflow-1">
              昵称：{{ userInfo?.name }}
            </p>
            <p class="mt-10">群名称：{{ userInfo?.groupName ?? "--" }}</p>
          </dd>
        </dl>
        <p class="line-h-40 py-58">uid：{{ userInfo?.uuid }}</p>
        <p class="line-h-48 text-size-30">
          如果你确实在群中，无法领取免单商品，点击<span class="textec3342"
            >一键复制</span
          >后将复制的文本<span class="textec3342">发送到要绑定的群中</span
          >。1~2秒后马上撤回，就可以领取了!
        </p>
      </div>
      <div
        class="h-90 mt-30 bgfffeff flex-center round-16 text-size-28 text000"
      >
        {{ userInfo?.bindKeyword }}
      </div>
      <div
        class="bgffc600 mt-30 h-90 flex-center round-16 text-size-28 text000"
        @click="copyText(userInfo?.bindKeyword)"
      >
        一键复制
      </div>
      <div
        class="bgddd mt-30 h-90 flex-center round-16 text-size-28 text000"
        @click="emit('checkSelf', true)"
      >
        我刚刚已发送，点击刷新
      </div>
    </div>
  </div>
</template>
<script setup>
import { copyText } from "@/utils/common";

const props = defineProps(["userInfo"]);
const emit = defineEmits(["checkSelf"]);
</script>
<style lang="scss" scoped>
.bgfffeff {
  background: #fffeff;
}
.bgffc600 {
  background: #ffc600;
}
.textec3342 {
  color: #ec3342;
}
.van-image {
  display: block;
}
.w-max-300 {
  max-width: 500px;
}
.bg-image {
  background-image: url("https://images.maishou88.com/admin/buyer_circle_sc/20231127/20231127171553_8240.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.bgEA5752 {
  background: #ea5752;
}
.bgddd {
  background: #dddddd;
}
.box {
  width: 100vw;
  height: 100vh;
}
</style>
